import { VxeColumn, VxeTable, VxeTablePropTypes } from "vxe-table";
import "./../css/ops-table.scss";
import "./grid-item.scss";

export default defineComponent({
	name: "ResourceOverviewTable",
	setup() {
		const tableData = ref<RowVO[]>([
			{
				device_name: "/dev/mapper/centos_hd-root",
				fs: "xfs",
				zone: "/",
				total_space: "50 GiB",
				free_space: "38.7 GiB",
				rate: "22.6%"
			},
			{
				device_name: "/dev/sda1",
				fs: "xfs",
				zone: "/boot",
				total_space: "1014 MiB",
				free_space: "864.1 MiB",
				rate: "14.8%"
			},
			{
				device_name: "/dev/mapper/centos_hd-home",
				fs: "xfs",
				zone: "/home",
				total_space: "965 GiB",
				free_space: "831.7 GiB",
				rate: "13.8%"
			}
		]);
		interface RowVO {
			device_name: string;
			fs: string;
			zone: string;
			total_space: string;
			free_space: string;
			rate: string;
		}

		const headerCellClassName: VxeTablePropTypes.HeaderCellClassName<RowVO> = () => "ops-table-header-cell";
		const headerRowClassName: VxeTablePropTypes.HeaderRowClassName<RowVO> = () => "ops-table-header-row";
		const cellClassName: VxeTablePropTypes.CellClassName<RowVO> = ({ row, column }) => {
			let className = "ops-table-cell";
			const list = [
				// "cpu_utilization_rate",
				// "memory_utilization_rate",
				// "swap_utilization_rate",
				// "disk_read",
				// "disk_write",
				// "connect_num",
				// "tcp_tw",
				// "download_bandwidth",
				// "upload_bandwidth"
			];
			if (list.indexOf(column.field) !== -1) {
				row;
				className = "ops-table-cell ops-table-cell-green";
			}
			// if (column.field === "swap_utilization_rate") {
			// 	const rate = row.swap_utilization_rate.substring(0, row.swap_utilization_rate.length - 1);

			// 	if (parseFloat(rate) >= 75) {
			// 		className = "ops-table-cell ops-table-cell-red";
			// 	} else if (parseFloat(rate) >= 50) {
			// 		className = "ops-table-cell ops-table-cell-orange";
			// 	}
			// }
			return className;
		};
		return () => (
			<div
				class="react-grid-item react-draggable react-resizable"
				data-panelid="181"
				style="top: 342px; left: 842px; width: 1029px; height: 220px; position: absolute;"
			>
				<div class="panel-container" aria-label="【$show_hostname】：各分区可用空间(EXT.*/XFS) panel">
					<section class="panel-info-corner panel-info-corner--info" aria-label="Panel header info">
						<i aria-hidden="true" class="fa"></i>
						<span class="panel-info-corner-inner"></span>
					</section>
					<div class="panel-header grid-drag-handle">
						<header data-testid="data-testid Panel header 【None】：各分区可用空间(EXT.*/XFS)" class="panel-title-container">
							<div class="panel-title">
								<h2 class="css-1m35bcr">【None】：各分区可用空间(EXT.*/XFS)</h2>
								<div class="css-1vzus6i-Icon">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										width="16"
										height="16"
										class="css-sr6nr panel-menu-toggle"
									>
										<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
									</svg>
								</div>
							</div>
						</header>
					</div>
					<div class="panel-content panel-content--no-padding table-panel-content">
						<VxeTable
							data={tableData.value}
							border={true}
							header-row-class-name={headerRowClassName}
							header-cell-class-name={headerCellClassName}
							cell-class-name={cellClassName}
						>
							<VxeColumn field="device_name" title="设备名" width="300"></VxeColumn>
							<VxeColumn field="fs" title="文件系统"></VxeColumn>
							<VxeColumn field="zone" title="分区"></VxeColumn>
							<VxeColumn field="total_space" title="总空间"></VxeColumn>
							<VxeColumn field="free_space" title="可用空间"></VxeColumn>
							<VxeColumn field="rate" title="使用率"></VxeColumn>
						</VxeTable>
					</div>
				</div>
				<span class="react-resizable-handle react-resizable-handle-se"></span>
			</div>
		);
	}
});
